<!--产品-->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../css/product.css" />
</head>
<body class="gray product">
	<div class="mui-content">
		<div id="slider" class="mui-slider mui-fullscreen" >
	    		<div class="tab-head">
				<div class="mui-row">
					<div class="mui-col-xs-6 mui-col-sm-6 mui-active" _href="upcart" data-tab="1"><span>已上架</span></div>
					<div class="mui-col-xs-6 mui-col-sm-6" _href="downcart" data-tab="2"><span>未上架</span></div>
				</div>
			</div>
	    		<div class="mui-slider-group " style="height: 100%;" id="vueMain">
	    			<div id="upcart" class="mui-slider-item mui-control-content mui-active" >
	    				<div id="scroll1" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll" style="padding-top: 10px;"  >
	    						<div v-if="putaway.list.length==0">
	    							<p style="padding:50px 0;text-align: center;">您还没有上架任何产品</p>
	    						</div>
	    						<ul v-else class="mui-table-view">
	    							<template v-for="(item,index) in putaway.list">
		    							<li class="mui-table-view-cell link" _id="productDetail" _href="productDetail.html" _title="产品详细" :_extras="'gid='+item.id">
		    								<div class="mui-slider-right mui-disabled handle" >
											<a class="mui-btn mui-btn-red" :data-gid="item.id" :data-idx="index">下架</a>
										</div>
										<div class="mui-slider-handle">
											<img class="mui-media-object mui-pull-left" :src="item.img" />
											<div class="mui-media-body">
												<div class="name">{{item.name}}</div>
												<p>货号：{{item.goods_no}}</p>
												<p>类型：{{item.commend_name}}</p>
												<p>价格：{{item.price}}</p>
												<p>上货日期：{{item.add_time}}</p>
											</div>
										</div>
		    							</li>
	    							</template>
	    						</ul>
	    						
	    					</div>
	    				</div>
	    			</div>
	    			<div id="downcart" class="mui-slider-item mui-control-content" >
	    				<div id="scroll2" class="mui-scroll-wrapper ">
	    					<div class="mui-scroll"  style="padding-top: 10px;">
	    						<!--<div class="mui-loading">
								<div class="mui-spinner"></div>
							</div>-->
							<div v-if="soldout.list.length==0">
	    							<p style="padding:50px 0;text-align: center;">您还没有下架任何产品</p>
	    						</div>
	    						<ul v-else class="mui-table-view">
	    							<template v-for="(item,index) in soldout.list">
		    							<li class="mui-table-view-cell link" _id="productDetail" _href="productDetail.html" _title="产品详细" :_extras="'gid='+item.id">
		    								<div class="mui-slider-right mui-disabled handle" >
											<a class="mui-btn mui-btn-red" :data-gid="item.id" :data-idx="index">上架</a>
										</div>
										<div class="mui-slider-handle">
											<img class="mui-media-object mui-pull-left" :src="item.img" />
											<div class="mui-media-body">
												<div class="name">{{item.name}}</div>
												<p>货号：{{item.goods_no}}</p>
												<p>类型：{{item.commend_name}}</p>
												<p>价格：{{item.price}}</p>
												<p>上货日期：{{item.add_time}}</p>
											</div>
										</div>
		    							</li>
	    							</template>
	    						</ul>
	    					</div>
	    				</div>
	    			</div>
	    		</div>
		</div>
	</div>
<script src="../js/mui-edit.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/mui.pullToRefresh.js"></script>
<script src="../js/mui.pullToRefresh.material.js"></script>
<script src="../js/bexta.js"></script>
<script>
	var apps, views, merchant, first = 0, last = 10, isActive = false, loadtime;
	window.addEventListener('VueShow', function(){
		views = bexta.getWebview();
	    merchant = bexta.getStorage(MERCHANT);
	   	bexta.ajax(api.goods_list, function(res){
	   		if(apps){
	   			apps.putaway.list = res;
	   			apps.putaway.first = res.length;
	   			mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[0]).pullToRefresh().refresh(true);
	   			mui('#scroll1').scroll().scrollTo(0,0,100);
	   		}else{
	   			initVue(res);
	   		}
	   	}, {data:{uid:merchant.uid, firstrow:first, listrow:last, type:1}});
	});

	mui.plusReady(function () {
	   	bexta.getWebview().addEventListener('show', function(){
	   		merchant = bexta.getStorage(MERCHANT);
	   		if( isActive ){
	   			bexta.ajax(api.goods_list, function(res){
	   				apps.putaway.list = res;
	   				apps.putaway.first = res.length;
	   				mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[0]).pullToRefresh().refresh(true);
			   	}, {data:{uid:merchant.uid, firstrow:0, listrow:apps.putaway.first, type:1}});
	   		}
	   	});
	});
	function initVue(res){
		apps = new Vue({
			el:"#vueMain",
			data:{
				type:1,
				putaway:{
					list:res,
					first:res.length
				},
				soldout:{
					list:[],
					first:0
				},
				last:last
			},
			mounted:function(){
				isActive = !isActive;
				mui('.mui-scroll-wrapper').scroll({
					bounce:true
				});
				//上拉
				mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
					mui(pullRefreshEl).pullToRefresh({
						up:{
							callback:function(){
								var that = this;
								if( apps.type ==1 ){
									bexta.ajax(api.goods_list, function(res){
										if( res.length == 0 || res.length < apps.last ){
											that.endPullUpToRefresh(true);
										}else{
											that.endPullUpToRefresh(false);
										}
										if( res.length != 0 ){
											mui.each(res, function(){
												apps.putaway.list.push(this);
											});
										}
										apps.putaway.first += res.length;
									}, {data:{uid:merchant.uid, firstrow:apps.putaway.first, listrow:apps.last, type:1}});
								}else if( apps.type==2 ){
									bexta.ajax(api.goods_list, function(res){
										if( res.length == 0 || res.length < apps.last ){
											that.endPullUpToRefresh(true);
										}else{
											that.endPullUpToRefresh(false);
										}
										if( res.length != 0 ){
											mui.each(res, function(){
												apps.soldout.list.push(this);
											});
										}
										apps.soldout.first += res.length;
									}, {data:{uid:merchant.uid, firstrow:apps.soldout.first, listrow:apps.last, type:2}});
								}
							}
						}
					});
				});
				//上下架
				mui('#vueMain').on('tap', '.handle a', function(){
					console.log(1111);
					var gid = this.getAttribute('data-gid');
					var idx = this.getAttribute('data-idx');
					var li = this.parentNode.parentNode;
					bexta.ajax(api.update_goods_status, function(res, msg){
						mui.toast(msg);
						mui.swipeoutClose(li);
						if( !res ){
							if( apps.type == 1 ){
								apps.putaway.list.splice(idx, 1);
							}else{
								apps.soldout.list.splice(idx, 1);
							}
						}
					}, {data:{uid:merchant.uid, goods_id:gid}})
				});
				
				mui('.tab-head').on('tap', '.mui-col-xs-6', function(){
					if( this.classList.contains('mui-active') ) return ;
					document.querySelector('.tab-head .mui-col-xs-6.mui-active').classList.remove('mui-active');
					this.classList.add('mui-active');
					apps.type = this.getAttribute('data-tab');
					var href =this.getAttribute('_href');
					document.querySelector('.mui-slider-item.mui-active').classList.remove('mui-active');
					document.querySelector('#'+href).classList.add('mui-active');
					
					
					//已下架
					if( apps.type == 2 ){
						bexta.ajax(api.goods_list, function(res){
							apps.soldout.list = res;
							apps.soldout.first = res.length;
							mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[1]).pullToRefresh().refresh(true);
						}, {data:{uid:merchant.uid, firstrow:0, listrow:apps.last, type:2}});
					}else{
						bexta.ajax(api.goods_list, function(res){
							apps.putaway.list = res;
							apps.putaway.first = res.length;
							mui(document.querySelectorAll('.mui-slider-group .mui-scroll')[0]).pullToRefresh().refresh(true);
						}, {data:{uid:merchant.uid, firstrow:0, listrow:apps.last, type:1}});
					}
					
				});
			}
		});
	}
	
</script>
</body>
</html>
